<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    @click="opAdd"
                >新增盘点</el-button>
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-download"
                    @click="opTemplateDownload"
                >盘点模版下载</el-button>
            </div>
            <div class="right-panel">
                <el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon
                        class="vab-dropdown"
                        :class="{ 'vab-dropdown-active': fold }"
                        icon="arrow-up-s-line"
                    />
                </el-button>
            </div>
        </el-header>
        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
                    <el-form-item label="盘点时间" label-width="100px">
                        <el-date-picker
                            style="width: 350px"
                            v-model="queryList.dates"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime"
                        />
                    </el-form-item>
                    <el-form-item label="盘点仓库" label-width="100px">
                        <el-select
                            placeholder="---请选择盘点仓库---"
                            v-model="queryList.warehouseId"
                            style="width: 350px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option
                                v-for="item in optionsWarehouse"
                                :key="item.warehouseId"
                                :label="item.warehouseName"
                                :value="item.warehouseId"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="盘点单号" label-width="100px">
                        <el-input
                            placeholder="---请输入盘点单号---"
                            v-model="queryList.stockOrderCode"
                            style="width: 350px"
                        />
                    </el-form-item>
                    <el-form-item label="物料名称" label-width="100px">
                        <el-input
                            placeholder="---请输入物料名称---"
                            v-model="queryList.materialName"
                            style="width: 350px"
                        />
                    </el-form-item>
                    <el-form-item label="物料编码" label-width="100px">
                        <el-input
                            placeholder="---请输入物料编码---"
                            v-model="queryList.materialCode"
                            style="width: 350px"
                        />
                    </el-form-item>
                    <el-form-item label="创建人" label-width="100px">
                        <el-input
                            placeholder="---请输入创建人---"
                            v-model="queryList.createName"
                            style="width: 350px"
                        />
                    </el-form-item>
                    <el-form-item label="修改时间" label-width="100px">
                        <el-date-picker
                            style="width: 350px"
                            v-model="queryList.updateDates"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime"
                        />
                    </el-form-item>
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>

        <el-main class="nopadding">
                <scTable
                    ref="mytable"
                    :queryType="'stockOrder/pages'"
                    :data="listData"
                    :queryList="queryList"
                    :column="columnList"
                    :orderList="OrderList"
                    :sort-orders="['ascending', 'descending']"
                    @selection-change="selectionChange"
                    
                    stripe
                    border
                >
                   <el-table-column type="selection" width="50"></el-table-column>
                   <el-table-column label="序号" type="index" width="60" />
                   <el-table-column prop="stockBeginDate" label="计划盘点开始时间" width="180" sortable></el-table-column>
                   <el-table-column prop="stockEndDate" label="计划盘点结束时间" width="180" sortable></el-table-column>
                   <el-table-column prop="stockOrderCode" label="盘点单号" width="200" sortable></el-table-column>
                   <el-table-column prop="warehouseName" label="仓库名称" width="150" sortable></el-table-column>
                   <el-table-column prop="realStockDate" label="实际盘点时间" width="180" sortable></el-table-column>
                   <el-table-column prop="remarks" label="备注" width="150" sortable></el-table-column>
                   <el-table-column prop="createName" label="创建人" width="120" sortable></el-table-column>
                   <el-table-column prop="createTime" label="创建时间" width="200" sortable></el-table-column>
                   <el-table-column prop="updateTime" label="修改时间" width="200" sortable></el-table-column>
                   <el-table-column label="操作" fixed="right" align="right" width="200" >
                    <template #default="scope">
                        <el-button-group>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="opShow(scope.row, scope.$index)"
                            ><el-icon><View /></el-icon> 查看</el-button>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="opEdit(scope.row, scope.$index)"
                            ><el-icon><EditPen /></el-icon>编辑</el-button>
                            <el-popconfirm
                                title="确定删除吗？"
                                @confirm="opDelete(scope.row, scope.$index)"
                            >
                                <template #reference>
                                    <el-button
                                        text
                                        type="danger"
                                        size="small"
                                    ><el-icon><Delete /></el-icon>删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                        
                    </template>
                </el-table-column>
                </scTable>
            
        </el-main>
    </el-container>
    <save-dialog
        v-if="dialogSave"
        ref="saveDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogSave = false"
    ></save-dialog>
    <template-dialog
        v-if="dialogTemplate"
        ref="templateDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogTemplate = false"
    ></template-dialog>
   
</template>

<script>

import publicjs from "@/api/model/publicjs";
import saveDialog from "./save";
import templateDialog from "./template";
import tool from "@/utils/tool";
export default {
    name: "stocktaking",
    components: {
        publicjs,
        saveDialog,
        templateDialog
    },
    data() {
        return {
            dialogSave: false,
            dialogTemplate: false,
          
            showCondition: false,
            selectionRows: [],
            pkList: [""],
            columnList: [],
            OrderList: { },
            queryList: {
              
            },
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
           
            optionsWarehouse: [],//仓库
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ]
        };
    },
    methods: {
         //添加
         opAdd() {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("Add");
            });
        },
        //模版下载
        opTemplateDownload()
        {
            this.dialogTemplate = true;
            this.$nextTick(() => {
                this.$refs.templateDialog.open("Add");
            });
        },
        //编辑
        opEdit(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("Edit").setData(row);
            });
        },
          //查看
        opShow(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("Show").setData(row);
            });
        },
         //删除
        async opDelete(row) {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "stockOrder/delete",
                    { StockOrderId: row.stockOrderId }
                );
                if (returnValue.status == 200) {
                    this.$message.success("操作成功");
                    this.$refs.mytable.getData();
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
       
         //表格选择后回调事件
         selectionChange(selection) {
            this.selectionRows = selection;
            console.log("选择",selection);
        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            if (mode == "Add") {
                this.$refs.mytable.refresh();
            } else if (mode == "Edit") {
                this.$refs.mytable.refresh();
            }
        },
        async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post("warehouse/list",{IsExternal:false});
                if (returnValue.status == 200) {
                    console.log("仓库",returnValue.response);
                    this.optionsWarehouse = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        resetSearch() {
            this.queryList = {};
        },
       
       
    },
    async mounted() {
        await this.opBindData();
        await this.initOptions();
    },
};
</script>
<style>

</style>